<!DOCTYPE html>
<html>

	<head lang="en">
		<title>找攻略</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/plugins/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/strategyComment.css" />
		<link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="css/zyd.comment.css" rel="stylesheet" type="text/css">
		<link href="css/wangEditor-fullscreen-plugin.css" rel="stylesheet" type="text/css">
		<script src="/js/plugins/jrender/jrender.js"></script>
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
		<script src="/js/common.js"></script>
		<script src="/js/plugins/jquery-form/jquery.form.js"></script>
		<link rel="stylesheet" href="js/plugins/dialog/dialog.css">
		<script src="js/plugins/dialog/dialog.min.js"></script>


	</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="/travelPage.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

		<div class="comment" id="comment">

			<div class="container ">
				<div class="row">
						<div class="col-2 comment-head">
							<a href="userProfiles.html"  data-id="43">
								<img class="rounded-circle" render-src="list.user.headImgUrl">
							</a>
							<button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>
						</div>
						<div class="col">
							<p class="authorName" ><span render-html="user.nickName"></span></p>
							<span class="comment-star" render-fun="star" render-key="id" >
                            <!--动态回显星星的地方-->
                        	</span>
							<span class="comment-date" >2018-07-11</span>
							<div class="comment-content" render-html="comment">
								<p ></p>
							</div>
							<ul class="comment-img" render-loop="images" >
								<li>
									<img  render-src="images.coverUrl">
								</li>
							</ul>

							<div class="comment-link">
								<a render-fun="hand" render-key="strategy.id">
									<img  render-src="strategy.coverUrl"> <span render-html="strategy.title">广州攻略</span>
									<i class="fa fa-angle-right fa-2x"></i>
								</a>
							</div>

						</div>
				</div>
			</div>

			<div class="count d-flex justify-content-between" >
					<div class="p-2" id="commentCount">评论<span render-html="count">0</span></div>
					<div class="p-2">赞<span >0</span></div>
			</div>

		</div>







							<!-- 评论 -->
							<div class="commentList">
								<div render-loop="list">
								<ul class="comment">
									<li>
									<div class="comment-body" id="comment-1">
										<div class="cheader">
											<a target="_blank">
												<img class="userImage" render-src="list.author.headImgUrl">
												<strong render-html="list.author.nickName"></strong>
											</a>
											<div class="timer" render-html="list.createTime">
												<i class="fa fa-clock-o fa-fw"></i>
											</div>
										</div>
										<div class="content" render-html="list.content">
											<a href="#comment-5" class="comment-quote"></a>
										</div>
										<div class="sign">
											<a href="#comment-1" class="comment-reply" onclick="$.comment.reply(1, this)"><i class="fa fa-reply fa-fw"></i>回复</a>
										</div>
									</div>
								</li>

								</ul>
							</div>
							</div>





		<div class="comment-list">
			快来发表你的评论吧
		</div>

<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2" style="font-size:20px"><i class="fa fa-commenting-o" style="font-size:20px"></i> <a id="mybutton" style="font-size:20px">添加你的评论</a></div>
        <div class="p-2 btn-sc" style="font-size:20px"><i class="fa fa-star-o" style="font-size:25px;"></i>收藏</div>
    </div>
</div>
</div>




		<!-- 评价模态框 -->
		<div id="inputModal" class="modal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">编辑</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" method="post" id="infoForm">
							<input type="hidden" name="author.id" id="authorId">
							<input type="hidden" name="commentId" id="commentId">
							<textarea name="content" class="form-control" rows="5" placeholder="请填写你对该旅游地的评价"></textarea>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary submitBtn">保存</button>
					</div>
				</div>
			</div>
		</div>


<script>
    $(function () {
        var id = getParams().id;
        var currentPage = 1;
        var pages;
        var comment;

        var user = getUser();

        $("#mybutton").click(function () {
            console.log("aaaaa");
            $("#inputModal").modal("show");
        });


        $.get("/strategys/strategyComment/" + id, {id: id}, function (data) {
            console.log(data);

            $("#comment").renderValues(data,{
                hand:function (ele, value) {
                    ele.href="/strategyCatalogs.html?strategyId="+value;
                },
                star: function (ev, val) {
                    $(ev).attr("id", "star" + val);
                    console.log(ev);
                }
            });

            creatStart(data.state * 2, data.id);


        })


    	function creatStart(count,id) {
        var star = $("  <i class=\"fa fa-star-o\"></i>\n" +
            "                            <i class=\"fa fa-star-o\"></i>\n" +
            "                            <i class=\"fa fa-star-o\"></i>\n" +
            "                            <i class=\"fa fa-star-o\"></i>\n" +
            "                            <i class=\"fa fa-star-o\"></i>");
        for (var i = 0; i < count; i++) {
            var s = star[i];
            $(s).removeClass("fa-star-o")
            $(s).addClass("fa fa-star");
        }
        	$(star).appendTo("#star"+id+"");
    	}

		$(".submitBtn").click(function () {
		    console.log(111);
			if ($(".form-control").val() != null && $(".form-control").val() !=""){
			    $("#authorId").val(user.id);
			    $("#commentId").val(id);
                $("#infoForm").ajaxSubmit({
                    url: "/strategys/strategyDiscuss",
                    success: function (data) {
                        window.location.reload();
                    }
                })
			}else{
                $(document).dialog({
                    overlayClose: true,
                    content: "请输入评论内容"
                });
			}
        })

        //绑定收藏按钮
        $(".btn-sc").click(function () {
            var user = getUser();

            //判断用户是否登录
            if (user) {
                //修改星星
                $(".fa-star-o").removeClass("fa fa-star-o");

                $(".btn-sc").addClass("fa fa-star");

                $(document).dialog({
                    content: '已添加到我的收藏',
                });

        $.get("/strategys/strategyDiscuss/"+id,{id:id}, function (data) {
            pages = data.pages;
            comment=data.list;
			console.log(data);
            $(".commentList").renderValues(data);
                //加入收藏
                $.post("/users/travel/collect", {userId: user.id, travelId:id}, function (data) {
                })

        })
            } else {//没有登录不让收藏
                $(document).dialog({
                    type : 'confirm',
                    closeBtnShow: true,
                    content: '亲!您还未登录,点击确定按钮将回到登录页面',
                    onClickConfirmBtn: function(){
                        window.location="/mine/simpleProfiles.html"
                    },
                    onClickCancelBtn : function(){
                    }

                });

            }
        })





    $(window).scroll(function () {
        if (isFull()) {
            if (currentPage < pages) {
                $.get("/strategys/strategyDiscuss/"+id, {currentPage: ++currentPage,id:id}, function (data) {
                    $.merge(comment, data.list);
                    $(".commentList").renderValues({list: comment});
                })
            } else {
                $(document).dialog({
                    type: "notice",
                    autoClose: 2500,
                    position: "bottom"  // center: 居中; bottom: 底部
                });
            }
        }
    })
        $.get("/strategys/strategyDiscuss/"+id, function (data) {
            console.log(data);
            $(".commentList").renderValues(data);
        })



        $.get("/strategys/strategyDiscuss/count/"+id,{commentId:id}, function (data) {
            console.log(data);
            $("#commentCount").renderValues({count:data});

        })
    })

</script>
</body>

</html>